<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      layout:decorator="layout/layout">
<title layout:fragment="title">已缴账单</title>
<body>
<div class="main-content" layout:fragment="content">
    <div class="breadcrumbs" id="breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i>
                <a th:href="@{/}" href="/">首页</a>
            </li>
            <li class="active">已缴账单</li>
        </ul>
    </div>
    <!-- .page-content -->
    <div class="page-content">
        <div class="row">
            <div class="alert alert-block alert-info">
                <button type="button" class="close" data-dismiss="alert">
                    <i class="icon-remove"></i>
                </button>
                <i class="icon-remove"></i>
                <span>账单导出说明：</span>
                <span>每次导出的账单最大数量为3000条，请先选择条件进行查询后再导出。</span>
            </div>
            <div class="col-xs-12">
                <a href="javascript:void(0)" class="btn btn-primary btn-sm" id="exportBtn">
                    <i class="icon-plus icon-on-right bigger-120" style="top: 2px"></i> 导出已缴账单</a>
            </div>
            <hr/>
            <div class="col-xs-12" shiro:hasPermission="pmbill:oper:page">
                <form class="form-search" id="search-form">
                    <label for="houseNumber" class="search-label">房号</label>
                    <input type="text" class="search-query" name="houseNumber" id="houseNumber">
                    <label for="liveUserName" class="search-label">住户名称</label>
                    <input type="text" class="search-query" name="liveUserName" id="liveUserName">
                    <label for="liveUserMobile" class="search-label">手机号码</label>
                    <input type="text" class="search-query" name="liveUserMobile" id="liveUserMobile">
                    <br>
                    <label for="payOrderNo" class="search-label">缴费单号</label>
                    <input type="text" class="search-query" name="payOrderNo" id="payOrderNo">
                    <label for="paidStartTime" style="padding-top: 5px; padding-right: 5px;"
                           data-date-format="dd-mm-yyyy">缴费开始日期</label>
                    <input type="text" class="input-small date-picker" readonly="readonly" name="paidStartTime"
                           id="paidStartTime"/>
                    <label for="paidEndTime" style="padding-top: 5px; padding-right: 5px;">缴费结束日期</label>
                    <input type="text" class="input-small date-picker" readonly="readonly" name="paidEndTime"
                           id="paidEndTime"/>

                    <button type="button" class="btn btn-primary btn-sm" id="btn_search">查询<i
                            class="icon-search icon-on-right bigger-110"></i></button>
                    <button type="button" class="btn btn-sm" id="btn_search_clear">清空<i
                            class="icon-undo icon-on-right bigger-110"></i></button>
                </form>
            </div>

            <div class="col-xs-12">
                <table id="dataTable" class="table table-bordered table-striped dataTable"
                       aria-describedby="tradeTable_info">
                    <thead class="thin-border-bottom"></thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script layout:fragment="script" th:src="@{/assets/js/pmpaidbill/home.js}"></script>
</body>
</html>